<template>
    <div>
      <el-button type="success" size="small" @click="toadd">添加</el-button>
      <el-tree :props="treeProps"  ref="tree" :data="menu"  show-checkbox node-key="id"  default-expand-all :expand-on-click-node="false">
        <div slot-scope="{ node, data }" style="display: flex;justify-content: flex-start">

          <template v-if="data.type=='0'">
            <div style="width: 120px">{{data.name}}</div>
            <div style="width: 80px;">
              <el-tag type="success" size="mini"> 目录</el-tag>
            </div>
          </template>

          <template v-else-if="data.type == '1'">
            <div style="width:100px">{{data.name}}</div>
            <div style="width: 80px">
              <el-tag type="danger" size="mini">菜单</el-tag>
            </div>
          </template>
          <template v-else="data.type == '2'">
            <div style="width:80px">{{data.name}}</div>
            <div style="width: 80px">
              <el-tag type="warning" size="mini">按钮</el-tag>
            </div>
          </template>

          <div style="width: 100px">
            <i :class="['iconfont',data.icon]"></i>
          </div>
          <div style="width: 100px">
            {{data.parentName}}
          </div>
          <div style="width: 100px">
            {{data.url}}
          </div>
          <div style="width: 100px">
            {{data.perms}}
          </div>
          <div style="margin-left: 50px">
            <el-button size="mini" type="warning" @click="edit(data,node)">编辑</el-button>
            <el-button size="mini" type="danger">删除</el-button>
          </div>
        </div>
      </el-tree>


      <el-dialog :title="title" :visible.sync="formVisible" :close-on-click-modal="false" width="500px">
        <el-form :model="editMenu" size="small">
          <div>
            <el-radio v-model="editMenu.type" label="0" @change="changeTab('Folder')">目录</el-radio>
            <el-radio v-model="editMenu.type" label="1" @change="changeTab('MenuDetail')">菜单</el-radio>
            <el-radio v-model="editMenu.type" label="2" @change="changeTab('Button')">按钮</el-radio>
          </div>
          <div>
            <router-view></router-view>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="formVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>

    </div>

</template>

<script>
  import axios from "axios"
  import qs from "qs"
  import {deepCopy} from "../../js/common.js";

  export default {
      data(){
        return{
          menu: [],
          treeProps: {
            children: 'children',
            label: 'name'
          },
          title:"",
          formVisible:false,
          form:{},
          editMenu:{},
          parentMenus:[],
          parentids:[],

        }
      },
      methods:{
        getParentMenus(currobj){
            if (typeof currobj !== 'object') {
              return currobj; }
            if (currobj instanceof Array) {
              var newobj = [];
            } else {
              var newobj = {}
            }
            for (var key in currobj) {
              if(key =="children" && currobj['type'] ==1){
              }else{
                if (typeof currobj[key] !== 'object') {
                  // 不是引用类型，则复制值
                  newobj[key] = currobj[key];
                } else {
                  // 引用类型，则递归遍历复制对象
                  newobj[key] = this.getParentMenus(currobj[key])
                } } }
            return newobj

        },
        toadd(){
          this.formVisible = true;
          this.editMenu= {};
          this.parentids.splice(0,this.parentids.length);//清空当前的数据
          var routers= ["Folder","MenuDetail","Button"]
          this.changeTab(routers[2]);
          this.changeTab(routers[1]);

        },

        //编辑方法
        edit(data,node){
          // console.log("****")
          // console.log(node)
          this.formVisible = true;
          this.editMenu = deepCopy(data);
          this.parentids.splice(0,this.parentids.length);//清空当前的数据
          this.findParentIds(node);
          this.parentids.reverse();  //倒序输出

          var routers= ["Folder","MenuDetail","Button"]
         // console.log(routers[data.type])

          this.changeTab(routers[data.type+1]%3);
          this.changeTab(routers[data.type])


        },
        //找到父节点
        findParentIds(node){
          if(node.parent &&!(node.parent.data instanceof Array)){
            var id = node.parent.data.id;
            this.parentids.push(id);
            this.findParentIds(node.parent);

          }
        },
        //路由页面跳转方法
        changeTab(routerName){
          var that = this;
          this.$router.push({
            name:routerName,
            params:{
              menu:that.editMenu,
              menus:that.parentMenus,
              parentids:that.parentids,
            }
          })
        },
        //保存方法
        save(){
          this.formVisible = false;
          var that = this;

            axios.post("/sys/menu/save", qs.stringify(this.editMenu)).then(res => {
              var type = (res.data.code == "200") ? "success" : "warning";
              that.$message({
                type: type,
                message: res.data.message
              })
              if(res.data.code == "200")
                that.getMenu();
            })

        },
        //获取所有菜单
        getMenu(){
          var that = this;
          axios.get("/sys/menu/getMenu").then(function (response) {
            that.menu = response.data;
            that.parentMenus = that.getParentMenus(that.menu)
          })
        },
      },
      mounted(){
         this.getMenu();
      }
    }
</script>

<style scoped>

</style>
